<template>
	<cl-dialog v-model="visible" class="tongkang-view-order" width="90%" :close-on-click-modal="false">
		<el-card shadow="never">
			<template #header>
				<div class="card-header">
					<span>客情下单</span>
				</div>
			</template>
			<el-divider content-position="left">用户信息</el-divider>
			<el-form :model="orderData" label-width="120px" size="default">
				<el-row>
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input v-model="orderData.userName" style="background-color: #f5f7fa" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="电话">
							<el-input v-model="orderData.userPhone" style="background-color: #f5f7fa" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="所属门店">
							<shop-select v-model="orderData.shopId" :shopObj="shopObj" />
						</el-form-item>
					</el-col>
					<el-divider content-position="left">产品信息</el-divider>
					<el-col :span="8">
						<el-form-item label="产品选择">
							<el-select v-model="orderData.goodsMoney" placeholder="请选择产品">
								<el-option 
									v-for="item in options.goodsSelect" 
									:key="item.value" 
									:label="item.label" 
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="镜片数量选择">
							<el-select v-model="orderData.lensQuantity" placeholder="请选择镜片数量">
								<el-option 
									v-for="item in options.eyeglassSelect" 
									:key="item.value" 
									:label="item.label" 
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-divider content-position="left">附件</el-divider>
					<el-col :span="12">
						<el-form-item label="支付截图">
							<cl-upload v-model="orderData.payImg" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="验光单">
							<cl-upload v-model="orderData.eyeglassImg" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">订单摘要</el-divider>
				<el-row>
					<el-col v-if="orderData.goodsMoney" :span="12">
						<span>总价：{{ orderData.goodsMoney }}</span>
					</el-col>
					<el-col v-if="orderData.lensQuantity !== undefined && orderData.lensQuantity !== null && orderData.lensQuantity !== ''" :span="12">
						<span>镜片数量：{{ getEyeglassLabel(orderData.lensQuantity) }}</span>
					</el-col>
				</el-row>


				<div class="form-actions">
					<el-button type="success" @click="submitForm">提交订单</el-button>
					<el-button @click="closeDialog">关闭</el-button>
				</div>
			</el-form>
		</el-card>
	</cl-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import ShopSelect from './shop-select.vue';
import { value } from '/@/config';

const { service } = useCool();
const { t } = useI18n();
const visible = ref(false);
const emit = defineEmits(['closeDialog', 'update:modelValue']);

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	shopObj: {
		ype: Object,
		default: () => ({})
	},
});

const coatingFilmRes = ref([]);

const options = reactive({
	goodsSelect: [
		{ label: '医疗版4280', value: 4280 },
		{ label: '医疗版3980', value: 3980 },
		{ label: '标准版2680', value: 2680 },
		{ label: '升级补差价300', value: 300 },
	],
	eyeglassSelect: [
		{ label: t('双眼'), value: 0 },
		{ label: t('左眼'), value: 1 },
		{ label: t('右眼'), value: 2 },
	],
	coatingFilmSelect: []
});

// 订单数据
const orderData = reactive({
	userName: '',
	userPhone: '',
	goodsCode: '',
	goodsMoney: '',
	payImg: '',
	shopId: '',
	eyeglassImg: '',
	lensType: '',
	coatingFilm: '',
	lensQuantity: '',
	type: '',
});

// 重置orderData的数据
async function resetOrderData() {
	console.log('重置数据');
	Object.assign(orderData, {
		userName: '',
		userPhone: '',
		goodsCode: '',
		goodsMoney: '',
		payImg: '',
		eyeglassImg: '',
		lensType: '',
		coatingFilm: '',
		lensQuantity: '',
	});
}

// 提交订单
async function submitForm() {
	try {
		orderData.type = 'customerOrder' // 设置为客情下单类型
		const res = await service.order.order.createCustomerOrderBackend(orderData);
		ElMessage.success('客情订单提交成功');
		resetOrderData();
		closeDialog();
	} catch (error) {
		ElMessage.error(error.message || '订单提交失败');
	}
}

// 关闭弹窗
function closeDialog() {
	emit('closeDialog');
}

// 监听 modelValue 变化
watch(
	() => props.modelValue,
	val => {
		visible.value = val;
	}
);

// 监听 visible 变化
watch(
	() => visible.value,
	(val, oldVal) => {
		// 判断组件是否从关闭状态切换到打开状态
		if (oldVal === false && val === true) {
			// 组件打开时的处理逻辑
			resetOrderData();
		}
		emit('update:modelValue', val);
	}
);

// 根据镀膜值获取对应的label
function getCoatingLabel(value) {
	const option = options.coatingFilmSelect.find(item => item.value === value);
	return option ? option.label : value;
}

// 根据镜片类型获取对应的label
function getEyeglassLabel(value) {
	const option = options.eyeglassSelect.find(item => item.value === value);
	return option ? option.label : value;
}

// 监听产品选择变化
watch(
	() => orderData.goodsMoney,
	(newGoodsMoney) => {
		orderData.coatingFilm = ''
		// 当新值不为空时的处理
		if (newGoodsMoney) {
			console.log(coatingFilmRes.value[newGoodsMoney]);
			options.coatingFilmSelect = coatingFilmRes.value[newGoodsMoney]?.data?.c_coating_type || [];
		} else {
			options.coatingFilmSelect = [];
			return;
		}
	}
);
</script>
<style scoped>
.zhongtian-add-order {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-item,
.payment-item {
	margin-bottom: 20px;
}

.detail-header,
.payment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.border-top-blue {
	border-top: 3px solid #409eff;
}

.form-actions {
	margin-top: 30px;
	text-align: center;
}

.form-actions .el-button {
	margin: 0 10px;
}

/* 添加新的样式类 */
.inline-flex-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
</style>